import enquireJs from 'enquire.js'

const enquireScreen = (call) => {

  enquireJs.register('only screen and (max-width: 767.99px)', {
    match: function () { call && call(true) },
    unmatch: function () { call && call(false) }
  })
}

export default enquireScreen



// enquire.register('screen and (max-width: 45em)', {
//   match: function () { },                      // 当媒体查询与上述匹配时，即当窗口宽度小于45em时的响应
//   unmatch: function () { },                   // 当窗口从匹配调整到不匹配以后的响应
//   setup: function () { },                     //只会响应一次，何时注册处理程序？
//   deferSetup: true, destroy: function () { },   // 默认为false,一旦被设置为true,将安装函数的执行推迟到第一次匹配媒体查询
//   destroy: function () { },                     //处理程序未注册时触发。在此处放置清理代码
// });


// inquire允许在register中有多个处理程序
// enquire.register('screen and min-width: 45em', [
//   { match: function() { console.log('handler 1 matched'); } },
//   { match: function() { console.log('handler 2 matched'); } }
// ]);

// 或者用以下的方式
// const query = 'screen and (min-width: 45em)'; 
// enquire.register(query, function() { console.log('handler 3 matched'); });
// enquire.register(query, function() { console.log('handler 4 matched'); });



// enquire提供了unregister方法去取消register
// const handler1 = {
//   match: function () { },
//   destory: function () { console.log('handler 1 destoryed') },
// }
// const handler2 = {
//   match: function () { },
//   unmatch: function () { console.log('handler 2 unmatched') }
// }

// enquire.register('screen and (min-width: 40em)', handler1);
// enquire.unregister('screen and (min-width: 40em)'); // 'handler 1 destoryed'

// enquire.register('screen and (min-width: 50em)', handler2);
// enquire.unregister('screen and (min-width: 50em)', handler2); // 'handler 2 unmatched'